<template>
  <div class="login-page-max">
    <div style="padding: 30vw 0px  8vh;">
      <van-image width="80vw" height="20vh" :src="require('@/assets/logo.png')" />
    </div>
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]" />
      <div style="margin: 50px 20px 20px; ">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-checkbox v-model="checked">已阅读并同意 <a href="">服务协议</a></van-checkbox>
  </div>
</template>

<script>
import { userLogin } from '@/api/user'
export default {
  name: 'LoginPage',
  data () {
    return {
      username: 'admin',
      password: '123456',
      checked: true
    }
  },
  created () {
  },
  methods: {
    onSubmit () {
      if (this.checked) {
        const data = {
          username: this.username,
          password: this.password
        }
        userLogin(data).then((res) => {
          console.log(res)
          // 将权证信息存入vuex
          this.$store.commit('user/setUserToken', res.token)
          this.$router.push('/home')
        }).catch((err) => {
          if (!err.message) {
            return console.log(err)
          }
          this.$toast({
            message: '网络连接不良,请稍后再试~',
            duration: 3000,
            position: 'bottom'
          })
          console.log('网络连接不良,请稍后再试~', err.message)
        })
      } else {
        // 如果未勾选同意服务协议，提示用户
        this.$toast({
          message: '请同意服务协议',
          duration: 3000,
          position: 'bottom'
        })
      }
    }
  }
}
</script>
<style scoped lang='less'>
div{
  text-align: center;
}
.van-checkbox {
  justify-content: center;
}
</style>
